<template>

    <div class="bg-light lter b-b wrapper-md clearfix titleBtns">
        <h2 class="m-n font-thin h4 pull-left">数据库 > Mysql > 监控与报警</h2>
    </div>

    <div class="wrapper-md">
        <div class="panel panel-default form-horizontal form" role="form">
            <div class="panel-heading">
                <i class="fa fa-plus"></i>历史监控数据
            </div>
            <div class="panel-body">
                <div class="row wrapper">
                    <form name="dataForm" novalidate class="form-horizontal form">
                        <div class="form-group row">
                            <label class="wrap-title col-md-1 control-label">数据指标:</label>
                            <div class="form-control1 col-md-8">
                                <div class="wrap">
                                <span>
                                    <input type="radio" id="radio_1" name="region" class="chk_1 ajust" value="Keys" v-model="entry.neicun"/>
                                    <label for="radio_1">Keys</label>
                                </span>
                                 <span>
                                    <input type="radio" id="radio_2" name="region" class="chk_1 ajust" value="Expires" v-model="entry.neicun"/>
                                    <label for="radio_2">Expires</label>
                                 </span>
                                  <span>
                                    <input type="radio" id="radio_3" name="region" class="chk_1 ajust" value="UsedMemory" v-model="entry.neicun"/>
                                    <label for="radio_3">UsedMemory</label>
                                 </span>
                                 <span>
                                    <input type="radio" id="radio_4" name="region" class="chk_1 ajust" value="InFlow" v-model="entry.neicun"/>
                                    <label for="radio_4">InFlow</label>
                                 </span>
                                 <span>
                                    <input type="radio" id="radio_5" name="region" class="chk_1 ajust" value="OutFlow" v-model="entry.neicun"/>
                                    <label for="radio_5">OutFlow</label>
                                 </span>
                                 <span>
                                    <input type="radio" id="radio_6" name="region" class="chk_1 ajust" value="FailedCount" v-model="entry.neicun"/>
                                    <label for="radio_6">FailedCount</label>
                                 </span>
                                 <span>
                                    <input type="radio" id="radio_7" name="region" class="chk_1 ajust" value="ComCount" v-model="entry.neicun"/>
                                    <label for="radio_7">ComCount</label>
                                 </span>
                                 <span>
                                    <input type="radio" id="radio_8" name="region" class="chk_1 ajust" value="TotalQps" v-model="entry.neicun"/>
                                    <label for="radio_8">TotalQps</label>
                                 </span>
                                 <span>
                                    <input type="radio" id="radio_9" name="region" class="chk_1 ajust" value="32G" v-model="entry.neicun"/>
                                    <label for="radio_9">+自定义监控项</label>
                                 </span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="wrap-title col-md-1 control-label" @click="getDateRange()">查询时间:</label>
                            <div class="form-control1 input-group date col-md-3" style="padding-left: 15px;">
                                <!--<input date-range-picker class="form-control date-picker" type="text" placeholder="2016-01-01 - 2016-09-16" v-model="data.date" ng-init="data.date={startDate: null, endDate: null}"
                                       min="2015-01-01"/>-->
                                <date-range-picker :picker-value.sync="entry.myDate" :min-date="daterange.minDate" :max-date="daterange.maxDate" :placeholder="daterange.placeholder" :disable="daterange.disable" :apply-label="daterange.apply" :apply-class="daterange.applyClass" :cancel-label="daterange.cancel"></date-range-picker>
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>

                    </form>

                </div>
                <div class="row">
                    <chart :options="chartOption"></chart>
                </div>
                <div class="row">
                    <div class="chart" v-echarts="lineChartOption"></div>
                </div>
            </div>
        </div>
    </div>

</template>
<style>
    .chart {
        width: 100%;
        height: 400px;
    }
</style>
<script>

    require("../../resources/vendor/lib/daterangepicker/daterangepicker.css")

    import daterangepicker from "../../resources/components/daterangepicker.vue"

    import ECharts from 'vue-echarts/src/components/ECharts.vue'

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}

            return {        //必须使用这样的形式，才能创建出单一的作用域
                entry:{
                    neicun:null,
                    myDate:null
                },
                daterange:{
                    apply:'确认',
                    cancel:'取消',
                    placeholder:'2016-01-01 - 2016-09-16',
                    disable:false,
                    startDate:'',
                    endDate:'',
                    minDate:'2016-08-10',
                    maxDate:'2016-09-25',
                    applyClass:'btn-dark'
                },
                chartData:[],
                chartOption:{
                    title: {
                        left: 'center',
                        text: '示例图1'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            params = params[0];
                            var date = new Date(params.name);
                            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                        },
                        axisPointer: {
                            animation: false
                        }
                    },
                    xAxis: {
                        type: 'time',
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        splitLine: {
                            show: false
                        }
                    },
                    series: [{
                        name: '模拟数据',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: []
                    }]
                },
                lineChartOption:null
            }
        },
        created () {
            var vm = this;


            vm.lineChartOption = {
                title: {
                    left: 'center',
                    text: '示例图2'
                },
                tooltip : {
                    trigger: 'axis'
                },
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'Num',
                        type:'line',
                        areaStyle: {normal: {}},
                        data: [52, 54, 60, 61, 65, 62, 80, 85, 90, 99, 40, 30, 20, 10, 0]
                    }
                ]
            };

            setInterval(function () {
                vm.addChartData();
            }, 1000);
        },
        ready () {
            var timer;
            var now = +new Date(1997, 9, 3);
            var oneDay = 24 * 3600 * 1000;
            var value = Math.random() * 1000;
            for (var i = 0; i < 1000; i++) {
                this.chartData.push(randomData());
            }

            function randomData() {
                now = new Date(+now + oneDay);
                value = value + Math.random() * 21 - 10;
                return {
                    name: now.toString(),
                    value: [
                        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                        Math.round(value)
                    ]
                }
            }

            this.monitor();

            var self = this;

            timer = setInterval(function () {

                for (var i = 0; i < 5; i++) {
                    self.chartData.shift();
                    self.chartData.push(randomData());
                }

                self.monitor();

            }, 1000);

        },
        methods :{
            getDateRange () {
                console.log(this.entry.myDate);
            },
            monitor () {
                this.chartOption.series[0].data = this.chartData;
            },
            addChartData () {
                var vm = this;
                vm.lineChartOption.xAxis[0].data.push(Math.round(vm.lineChartOption.xAxis[0].data[vm.lineChartOption.xAxis[0].data.length - 1] + 1));
                vm.lineChartOption.xAxis[0].data.shift();
                vm.lineChartOption.series[0].data.push(Math.round(Math.random() * 100));
                vm.lineChartOption.series[0].data.shift();
            }
        },
        components: {
            "date-range-picker":daterangepicker,
            chart: ECharts
        },
        directives:{
            echarts : require('../../resources/directives/echarts')
        }
    }

</script>
